<template>
    <div class="person">
        <h2>姓名：{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changeAll">修改全部</button>
    </div>
</template>

<script lang="ts" setup name="Person"> 
    import {ref,watch} from 'vue';
    let person = ref({
        name: '真米酒',
        age: 19
    })
    function changeName(){
        person.value.name += '~';
    }
    function changeAge(){
        person.value.age += 1;
    }
    function changeAll(){
        person.value = {name:'江燕云',age: 24};   //person 的地址发生变化，真正意义上全部替换
    }
    //监视
    //监视 ref 定义的 对象类型 的数据，监视的是对象的地址值，
    //若想对监视对象内部属性的变化，需要手动开启深度监视。
    //若是不加深度监视，除非进行 对象类型 的全部改变，否则不会出发监听
    // watch(person,(newValue,oldValue)=>{
    //     console.log('person发生变化',newValue,oldValue);
    // },{deep: true,immediate: true})
    //deep: 为true,开启深度监视
    //immediate: 为true,先执行监视回调

     watch(person,newValue=>{   //回调函数可以是一个参数
        console.log('person发生变化',newValue);
    },{deep: true,immediate: true})
</script>

<style>
    .person{
        background-color: rgb(251, 95, 121);
        border-radius: 10px;
        /* height: 150px; */
        width: 300px;
        box-shadow: 0 0 10px;
    }
</style>